<template>
    <div>
        <nav>
            <ul>
                <li>
                    <router-link to="/" exact>首页</router-link>
                    <router-link to="/hotCommodities" exact>热销产品</router-link>
                    <router-link to="/commodityClassification" exact>商品分类</router-link>
                </li>
                <div style="float: right;font-weight: bold;width: 420px;">
                    <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tx&skin=pitaya&fontsize=18" frameborder="0" width="100%"
                            height="30" allowtransparency="true"></iframe>
                </div>
            </ul>
        </nav>
    </div>
</template>

<script>
    export default {
         name: "Header"
    }
</script>

<style scoped>
    ul {
        list-style-type: none; /*消除黑点*/
        text-align: center;
        margin: 0;
    }

    li {
        font-size: 24px;
        font-weight: bold;
        font-family: "JetBrains Mono";
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #444; /*设置字体颜色*/
        text-decoration: none; /*消除下划线*/
        padding: 12px;
        border-radius: 5px;
    }

    /*选中则发生一些变化*/
    .router-link-active {
        background: rgba(255, 255, 255, 0.8);
        color: orange;
    }

</style>